<template>
	<div ref="wrapRef" id="container"></div>
</template>
<script lang="js" setup>
	import {defineComponent, ref, nextTick, unref, onMounted} from 'vue';
	import {getgps} from '@/api/screen/yewuapi.js';
	import defaultMarker from './defaultMarker.png';

	import {useScript} from '/@/hooks/web/useScript';

	const A_MAP_URL = 'https://webapi.amap.com/maps?v=2.0&key=dc81674b231824b7c4ca9dd8c72a9b4f&plugin=AMap.MarkerCluster';
	const {toPromise} = useScript({src: A_MAP_URL});
	const points = ref([
		{weight: 8, lnglat: ['116.506647', '39.795337']},
		{weight: 1, lnglat: ['116.843352', '40.377362']},
		{weight: 1, lnglat: ['116.637122', '40.324272']},
		{weight: 1, lnglat: ['116.105381', '39.937183']},
		{weight: 1, lnglat: ['116.653525', '40.128936']},
		{weight: 1, lnglat: ['116.486409', '39.921489']},
		{weight: 1, lnglat: ['116.658603', '39.902486']},
		{weight: 1, lnglat: ['116.338033', '39.728908']},
		{weight: 1, lnglat: ['116.235906', '40.218085']},
		{weight: 1, lnglat: ['116.366794', '39.915309']},
		{weight: 1, lnglat: ['116.418757', '39.917544']},
		{weight: 1, lnglat: ['116.139157', '39.735535']},
		{weight: 1, lnglat: ['116.195445', '39.914601']},
		{weight: 1, lnglat: ['116.310316', '39.956074']},
		{weight: 1, lnglat: ['116.286968', '39.863642']},
	]);
	const map=ref(null);

	onMounted(() => {
		// initMap();
		getMapData();
	});
	const getMapData = () => {
		getgps()
			.then((res) => {
				console.log('充电桩地图接口', res);
				points.value=res.map((item) => {
					return {
						...item,
						lnglat: [item.stationLng, item.stationLat],
						weight:1,
					}
				});
				console.log('this.points ', points.value);
				initMap();
			})
			.catch(() => {
			});
	};
	async function initMap() {
		await toPromise();
		await nextTick();
		var cluster;

		map.value = new AMap.Map('container', {
			center: [104.937478, 35.439575],
			zoom: 5,
		});
		// tm  地图bug，聚合必须延时，就这个原因一直排查各种其他问题，最后发现是这个问题
		setTimeout(() => {
			cluster = new AMap.MarkerCluster(map.value , points.value, {gridSize: 60});
		}, 1000);
	}
</script>
<style scoped>
	#container {
		height: 100%;
		width: 100%;
	}
</style>
